<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" text="width=device-width, initial-scale=1.0">
  <title>TODO离线应用-2</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <style>
    .completed {
      text-decoration: line-through;
    }

    li {
      cursor: pointer;
    }

    .num_list {
      display: flex;
    }

    .num_list li {
      margin-right: 40px;
    }

    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <h4>TODO离线应用2</h4>
    <p>上一节做到了增加和删除TODO后，TODO可以永远保存，但是当我们点击已完成TODO后刷新网页，已完成的状态却没有保存，本章节我们解决此问题</p>
    <a href="https://segmentfault.com/a/1190000038222430">vue中watch高级用法deep和immediate</a>
    <ul class="num_list">
      <li @click="currentStatus = 'ALL'" :class="{active: currentStatus === 'ALL'}">
        总全部：{{ todoList.length }}
      </li>
      <li @click="currentStatus = 'COMPLETED'" :class="{active: currentStatus === 'COMPLETED'}">
        已完成：{{ completedNum }}
      </li>
      <li @click="currentStatus = 'TODO'" :class="{active: currentStatus === 'TODO'}">
        未完成：{{ todoList.length - completedNum }}
      </li>
    </ul>

    <input type="text" v-model="text" @keyup.enter="addTodo" placeholder="新建待办事项" />
    <input type="text" v-model="searchKey" placeholder="搜索代办事项" />

    <ol v-if="todoListSearchComputed.length">
      <li
        class="todo"
        v-for="(todo, index) in todoListSearchComputed"
        :class="{ completed: todo.completed }"
        @click="todo.completed = !todo.completed"
      >
        {{ todo.text }}
        <button @click.stop="deleteTodo(index)">删除</button>
        <button @click.stop="addFirst(index)">顶置</button>
      </li>
    </ol>
    <h3 v-else>暂无数据</h3>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        text: '',
        searchKey: '',
        currentStatus: 'ALL', // 'ALL、COMPLETED、TODO'
        todoList: localStorage.todoList ? JSON.parse(localStorage.todoList) : [
          {
            text: '明天去洗澡',
            completed: false,
          },
          {
            text: '早上跑步',
            completed: true,
          },
          {
            text: '下午看完视频',
            completed: false,
          },
          {
            text: '晚上跑步',
            completed: false,
          },
          {
            text: '晚上写作业',
            completed: false,
          },
        ],
      },

      computed: {
        completedNum() {
          const completedList = this.todoList.filter(function(item) {
            return item.completed === true
          })
          return completedList.length
        },
        todoListComputed() {
          var currentStatus = this.currentStatus
          var todoList = this.todoList
          if (currentStatus === 'ALL') {
            return todoList
          } else if (currentStatus === 'COMPLETED') {
            return todoList.filter(function(item){
              return item.completed === true
            })
          } else {
            return todoList.filter(function(item){
              return item.completed === false
            })
          }
        },
        todoListSearchComputed() {
          var todoListComputed = this.todoListComputed
          var searchKey = this.searchKey.trim()
          if (!searchKey) {
            return todoListComputed
          } else {
            return this.todoListComputed.filter(function(item) {
              return item.text.includes(searchKey)
            })
          }
        },
      },

      watch: {
        todoList: {
          deep: true,
          handler(val) {
            console.log(val)
            localStorage.todoList = JSON.stringify(val)
          }
        },
      },

      methods: {
        deleteTodo(index) {
          this.todoList.splice(index, 1)
        },

        addFirst(index) {
          const firstTodo = this.todoList.splice(index, 1)
          this.todoList.unshift(firstTodo[0])
        },

        addTodo() {
          var text = this.text.trim()
          if (!text) {
            alert('请输入内容')
            return
          }
          this.todoList.push({
            text: text,
            completed: false,
          })
          this.text = ''
        },
      }
    })
  </script>
</body>

</html>
